<template>
	<div class="main" style="background: #fff;">
		<div style="width: 7.5rem;height: 100vh;background: #fff;">
			<scroller>
				<div class="payOuterWrap flex-h">
					<div class="back">
						<go-back aa='../teachers/teaindex'></go-back>
						<h2 @click="commonJs.gosto('../teachers/teaindex')">购买激活服务</h2>
					</div>
					<span class="listsp">服务内容</span>
					<div class="payWrap">
						<div class="payBoxs">
							<!-- <span class="listsp">服务内容</span> -->
							<div class="listbox">
								<div class="flex-h listds"><span class="sp"><i></i></span><b class="flex1 sbs">生成生涯测评综合结果</b><span class="sp2"><em class="ee1">3</em><em class="ee2">次</em></span></div>
								<div class="flex-h listds"><span class="sp"><i></i></span><b class="flex1 sbs">生成优势科目测评综合结果</b><span class="sp2"><em class="ee1">3</em><em class="ee2">次</em></span></div>
								<div class="flex-h listds"><span class="sp"><i></i></span><b class="flex1 sbs">生成最佳选课方案</b><span class="sp2"><em class="ee1">3</em><em class="ee2">次</em></span></div>
								<div class="flex-h listds"><span class="sp"><i></i></span><b class="flex1 sbs">生成生涯测评单项结果</b><span class="sp2"><em class="ee1">3</em><em class="ee2">次</em></span></div>
								<div class="flex-h listds"><span class="sp"><i></i></span><b class="flex1 sbs">查看生涯测评单项和综合结果</b><span class="sp2"><em class="ee1">3</em><em class="ee2">次</em></span></div>
								<div class="flex-h listds"><span class="sp"><i></i></span><b class="flex1 sbs">查看优势科目测评综合结果</b><span class="sp2"><em class="ee1">不限次</em><em class="ee2"></em></span></div>
								<div class="flex-h listds"><span class="sp"><i></i></span><b class="flex1 sbs">查看最佳选课方案</b><span class="sp2"><em class="ee1">不限次</em><em class="ee2"></em></span></div>
							</div>
							<div class="flex-h tids">
								<span class="sp1">有效期</span>
								<span class="flex1 sp2">2019-12-12 至 2019-12-12</span>
							</div>
						</div>


					</div>
					<div class="payBot flex-h">
						<span class="pay1sp flex1"  @click="gopay"><b>服务费</b><i>¥199</i></span>
						<span class="pay2sp flex1" @click="commonJs.gosto('../pays/listscuess')">去支付</span>
					</div>
				</div>
			</scroller>
		</div>
	</div>
</template>
<script>
	import ls from 'store2';
	import axios1 from '~/plugins/axios1'

	import {
		format
	} from '~/plugins/filter';
	import goBack from '~/components/goBack'
	export default {
		head: {
			title: '支付'
		},
		components: {
			goBack
		},
		data() {
			return {
				showNext: false,
				userType: ls.get('userData').userType,
			}
		},
		created() {
			this.commonJs.gologins();
		},
		mounted: function() {
			if (this.commonJs.isTerminal() == 'isAndroid') {
				if (window.history && window.history.pushState) {
					history.pushState(null, null, document.URL);
					window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
				}
			}
		},
		destroyed() {
			window.removeEventListener('popstate', this.fun, false); //false阻止默认事件
		},
		watch: {

		},

		methods: {
			gopay(){
				let tokens = ls.get('userData').accessToken;
				let uuid = ls.get('userData').userVoId;
				window.location.href='https://wap-test.shengxue985.sx985.com/home?product_ids=2&sx_token='+tokens+'&sx_uid='+uuid
			},
			fun() {
				this.$router.replace({
					path: '../teachers/teaindex'

				})

			},
		
	
	

		},
		beforeDestroy() {

		}

	}
</script>

<style scoped lang="less">
	.payOuterWrap {
		width: 7.5rem;
		height: 100vh;
		background: #fff;
		flex-direction: column;
		overflow: hidden;
		.listsp {
			border-top: 1px solid rgba(238,238,238,1);
			padding: 0.4rem 0 0.2rem 0.32rem;
			font-size: 0.3rem;
			color: rgba(187, 187, 187, 1);
			display: block;
			text-align: left;
			width: 100%;
			box-sizing: border-box;
		}
		.payWrap {
			flex: 1;
			padding: 0 0.3rem;
			width: 7.5rem;
			box-sizing: border-box;

			.payBoxs {
				width: 100%;
				height: 100%;

				

				.listbox {
					width: 100%;
					height: 5.3rem;
					background: rgba(250, 250, 250, 1);
					border-radius: 0.2rem;
					padding: 0.2rem;
					box-sizing: border-box;

					.listds {
						width: 100%;
						height: 0.7rem;
						line-height: 0.7rem;

						.sp {
							width: 0.6rem;
							height: 0.7rem;

							i {
								display: block;
								width: 0.12rem;
								height: 0.12rem;
								margin: 0.29rem auto;
								background: rgba(108, 191, 32, 1);
								border-radius: 0.06rem;
							}
						}

						.sbs {
							line-height: 0.7rem;
							height: 0.7rem;
							font-size: 0.3rem;
							font-weight: bold;
							color: rgba(34, 34, 34, 1);

						}

						.sp2 {
							height: 0.7rem;
							line-height: 0.7rem;

							.ee1 {
								font-size: 0.3rem;
								font-weight: bold;
								color: rgba(108, 191, 32, 1);
							}

							.ee2 {
								font-size: 0.24rem;
								font-weight: bold;
								color: rgba(187, 187, 187, 1);
								margin-left: 0.05rem;
							}
						}

					}
				}
				.tids{
					width: 100%;
					height:1rem;
					padding: 0.2rem;
					box-sizing: border-box;
					.sp1{
						font-size:0.3rem;
						color:rgba(187,187,187,1);
						line-height:1rem;
					}
					.sp2{
						text-align: right;
						font-size:0.3rem;
						font-weight:bold;
						color:rgba(34,34,34,1);
						line-height:1rem;
					}
				}
				
			}
		}

		.payBot {
			width: 100%;
			height: 1.3rem;
			padding: 0 0.3rem;
			box-sizing: border-box;
			.pay1sp{
				height: 1rem;
				line-height: 1rem;
				text-align: center;
				b{
					font-size:0.3rem;
					font-weight:600;
					color:rgba(34,34,34,1);
				}
				i{
					font-size:0.36rem;
					font-weight:600;
					color:rgba(108,191,32,1);
					margin-left: 0.1rem
				}
			}
			.pay2sp{
				height:1rem;
				background:rgba(108,191,32,1);
				box-shadow:0px 0.1rem 0.2rem -01rem rgba(108,191,32,0.5);
				border-radius:0.1rem;
				font-size:0.3rem;
				font-weight:600;
				color:rgba(255,255,255,1);
				line-height:1rem;
				text-align: center;
			}
		}
	}

	.back {
		width: 100%;
		height: auto;

		h2 {
			padding: 0 0.3rem;
			box-sizing: border-box;
			display: block;
			height: 0.8rem;
			font-size: 0.44rem;

			font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.8rem;
		}
	}
</style>
